import * as echarts from 'echarts';
import { isNil } from "lodash-es";
import React from "react";
import { IProvinceGDP } from "../../core/interface";

export interface IProps {
    currentProvince: string;
    currentData: IProvinceGDP[];
}

/** 总GDP和就业人数折线图 */
const LineChartForGDPAndEmployee: React.FC<IProps> = (props) => {
    const { currentProvince, currentData } = props;
    const containerRef = React.useRef<HTMLDivElement>(null);
    const chartRef = React.useRef<echarts.ECharts>(null);

    const renderChart = () => {
        if (isNil(containerRef.current)) return;
        const { width, height } = containerRef.current.getBoundingClientRect();
        const chartWidth = width;
        const chartHeight = height;
        const option = {
            title: {
                text: `${currentProvince}GDP和就业人数年度变化`
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['GDP', '就业人数'],
                bottom: '5%',
                left: 'center',

            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '20%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: currentData.map(item => item.year),
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: 'GDP',
                    type: 'line',
                    data: currentData.map(item => item.gdp),
                },
                {
                    name: '就业人数',
                    type: 'line',
                    data: currentData.map(item => item.employedPersonNumber),
                },
            ]
        };
        if (chartRef.current) {
            // update
            chartRef.current.setOption(option);
        } else {
            const chart = echarts.init(containerRef.current, undefined, {
                height: chartHeight,
                width: chartWidth,
            });

            chart.setOption(option);
            chartRef.current = chart;
        }


    };

    React.useEffect(() => {
        renderChart();
    }, [currentData]);

    return (
        <div className="line-chart-for-gdp-and-employee-contaienr" ref={containerRef} style={{
            width: '100%',
            height: '400px',
            display: 'inline-block',
            verticalAlign: 'top',
            borderBottom: '1px solid #C4C6CF',
        }}>

        </div>
    );
};

export default LineChartForGDPAndEmployee;